<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-09-05 20:41:14
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-17 13:08:18
 * @FilePath: \BLOG\src\components\icon\Hour24.vue
-->
<template>
  <div class="icon-24-wrap">
    <svg class="time-24" t="1723019580232" viewBox="0 0 1193 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5530" :width="size" :height="size">
      <path d="M587.60533331 143.70133299m-69.461333 0a69.461333 69.461333 0 1 0 138.922666 0 69.461333 69.461333 0 1 0-138.922666 0Z" fill="#FFD300" p-id="5531"></path>
      <path
        d="M278.18666631 377.68533299l231.765334-216.746666a79.530667 79.530667 0 0 0 155.477333 0l234.154667 216.746666a10.410667 10.410667 0 0 0 6.997333 2.730667 10.069333 10.069333 0 0 0 7.509333-3.242667 10.24 10.24 0 0 0 0-14.506666L666.28266631 133.11999999a79.36 79.36 0 0 0-157.354666 0L265.04533331 362.66666699a10.069333 10.069333 0 0 0 0 14.506666 10.410667 10.410667 0 0 0 13.141333 0.512zM587.60533331 84.47999999a59.221333 59.221333 0 1 1-59.221333 59.221333 59.221333 59.221333 0 0 1 59.221333-59.221333z m-109.568 653.312H610.13333331v81.92h102.4V522.06933299h-143.36z m132.096-81.92h-8.192l8.192-16.042667z m81.92-112.64v256h-61.44V556.20266699l-62.293333 119.466666h20.992v40.96h-80.384l73.728-174.08z m-239.274667 125.781333a98.816 98.816 0 0 0 11.605334-46.762666 106.496 106.496 0 0 0-30.72-75.434667 102.4 102.4 0 0 0-76.629334-32.256 103.765333 103.765333 0 0 0-76.117333 31.744 105.130667 105.130667 0 0 0-31.232 75.946667 103.936 103.936 0 0 0 51.2 91.477333l9.216 5.973333 44.544-79.872-5.461333-5.461333a12.288 12.288 0 0 1-4.096-8.704 7.850667 7.850667 0 0 1 2.389333-5.973333 8.021333 8.021333 0 0 1 6.144-2.389334c9.045333 0 9.045333 2.389333 9.045333 5.12a36.010667 36.010667 0 0 1-4.949333 15.018667L259.24266631 819.71199999H466.77333331v-102.4h-39.594667z m-6.144 68.266667v61.44h-153.6l81.749334-152.234667a51.2 51.2 0 0 0 7.509333-24.576c0-5.973333-2.048-25.6-29.525333-25.6a28.842667 28.842667 0 0 0-29.013334 28.842667 30.208 30.208 0 0 0 5.12 17.066667l-26.624 47.616a81.749333 81.749333 0 0 1-32.938666-68.266667 84.309333 84.309333 0 0 1 25.429333-61.610667 82.090667 82.090667 0 0 1 61.44-25.6 81.237333 81.237333 0 0 1 62.464 26.624 85.333333 85.333333 0 0 1 25.088 61.269334 75.776 75.776 0 0 1-9.386667 37.205333l-40.789333 78.336z m406.357334-145.237333a70.656 70.656 0 0 0-27.818667 5.802666v-75.776h-92.16v296.96h92.16v-119.466666c0-9.045333 2.56-9.045333 3.413333-9.045334h2.730667a21.504 21.504 0 0 1 3.754667 11.093334v117.077333h92.16v-137.386667a99.498667 99.498667 0 0 0-20.138667-64.512 68.266667 68.266667 0 0 0-54.101333-24.746666z m54.101333 207.189333h-51.2v-96.597333a39.594667 39.594667 0 0 0-6.656-21.333334v-1.024a22.186667 22.186667 0 0 0-20.992-10.069333c-11.605333 0-23.893333 7.850667-23.893333 29.525333v99.498667h-51.2v-256h51.2v96.597333l17.066666-15.872a49.834667 49.834667 0 0 1 69.632 5.973334 78.848 78.848 0 0 1 15.530667 51.2z m19.456-399.36H252.75733331A103.594667 103.594667 0 0 0 149.33333331 503.29599999v335.701333a103.594667 103.594667 0 0 0 103.424 103.594667h673.792a103.594667 103.594667 0 0 0 103.424-103.594667V503.29599999a103.594667 103.594667 0 0 0-103.424-103.424z m82.944 439.125333a83.114667 83.114667 0 0 1-82.944 83.114667H252.75733331a83.114667 83.114667 0 0 1-82.944-83.114667V503.29599999a83.114667 83.114667 0 0 1 82.944-83.626667h673.792a83.114667 83.114667 0 0 1 82.944 82.944z"
        fill="#3989FF"
        p-id="5533"></path>
    </svg>
    <div class="run-days">
      <span>{{ runDays }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment';
import { ref } from 'vue';
const props = defineProps({
  size: {
    type: [Number, String],
    default: 60
  }
});

const createDate = '2024-04-01';
const runDays = ref(moment().diff(moment(createDate), 'days'));

// 计算距离2024年8月1日过去多少年多少天
// const now = new Date();
// const diff = now - new Date(createDate);
// const year = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
// const day = Math.floor((diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24));
</script>

<style scoped lang="scss">
.icon-24-wrap {
  position: relative;
  .run-days {
    font-family: 'DSDIGI';
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 5px;
    border: 1px solid #3989ff;
    background-color: #83a4dc;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
